﻿<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="true" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/websocket/css/style.css">
    <title>聊天</title>
</head>
<body>
    <div class="chart-content">
        <h2>${receiver}</h2>
        <div class="communication">
            <c:forEach items="${messageList}" var="message">
                <c:choose>
                    <c:when test="${message.sender == user.userName }">
                        <div>
                            <p class="right-message">${message.content}</p>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div>
                            <p class="left-message">${message.content}</p>
                        </div>
                    </c:otherwise>
                </c:choose>
            </c:forEach>
        </div>
        <div class="sender">
            <textarea id="txt"></textarea>
            <span class="submit-btn">发送</span>
        </div>
    </div>
</body>
<script src="/websocket/js/jquery.min.js"></script>
<script>
    var userName = $("h2").text();
    var left = '<div><p class="left-message">';
    var right = '<div><p class="right-message">';
    var end = '</p></div>';
    var websocket = new WebSocket('ws://localhost:8080/websocket/send');
    websocket.onmessage = function(evt){
        $(".communication").append(left + evt.data + end);
    }
    $(".submit-btn").click(function () {
        var message = $("#txt").val();
        $("#txt").val("");
        if(!message){

        }else{
            var param = userName+";"+message;
            websocket.send(param);
            $(".communication").append(right + message + end);
        }
    })
</script>

</html>